$(() => {
  getArtCateList()
  // 获取文章分类列表封装成函数, 一会删除, 编辑都要复用
  function getArtCateList () {
    $.ajax({
      type: "get",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status != 0) return layer.msg('分类列表获取失败!');
        layer.msg('分类列表获取成功!');
        // 通过模板引擎渲染
        const html = template('tpl-table', res)
        $('tbody').html(html)
      }
    });
  }
  // 弹层的返回值
  let index = null
  // 注册添加分类的点击事件
  $('#btnAddCate').on('click', function () {
    index = layer.open({
      type: 1,
      area: ['500px', '300px'],
      title: '添加文章分类',
      content: $('#dialog-add').html()
    });
  });

  // 给弹出层的确认按钮注册点击事件
  // $('#form-add').on('submit', function () {
  //   alert(1)
  // });
  // 必须使用事件委托(给动态添加的元素注册事件, 利用事件冒泡的原理)
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault();
    // 发ajax
    $.ajax({
      type: "post",
      url: "/my/article/addcates",
      data: $(this).serialize(),
      success: function (res) {
        if (res.status != 0) return layer.msg('添加文章分类失败!');
        // 重新调用getArtCateList()渲染页面
        getArtCateList()
        // 关闭弹层
        layer.close(index)
      }
    });
  })

  // 编辑弹出层  用事件委托注册
  $('body').on('click', '.btn-edit', function () {
    index = layer.open({
      type: 1,
      area: ['500px', '300px'],
      title: '修改文章分类',
      content: $('#dialog-edit').html()
    });


    // 获取id
    const id = $(this).attr('data-id')
    // 根据id获取数据, 然后回显
    $.ajax({
      type: "get",
      // 特别注意 动态参数如果传参  /:id  /:name
      url: "/my/article/cates/" + id,
      // data: {
      //   id: id
      // },
      success: function (res) {
        // 填充到表单内
        layui.form.val('form-edit', res.data)
      }
    });
  });

  // 编辑弹层确认提交按钮
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault();
    // 发ajax
    $.ajax({
      type: "post",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
      success: function (res) {
        if (res.status != 0) return layer.msg('修改文章分类失败!');
        // 重新调用getArtCateList()渲染页面
        getArtCateList()
        // 关闭弹层
        layer.close(index)
      }
    });
  })

  // 删除按钮
  $('body').on('click', '.btn-delete', function () {
    // 获取id
    const id = $(this).attr('data-id')
    // 根据id获取数据, 然后回显
    $.ajax({
      type: "get",
      // 特别注意 动态参数如果传参  /:id  /:name
      url: "/my/article/deletecate/" + id,
      success: function (res) {
        if (res.status != 0) return layer.msg('删除分类失败!');
        layer.msg('删除分类成功!')
        // 重新渲染
        getArtCateList()
      }
    });
  });
})


